<script lang="js" setup>


import { ref, defineProps } from "vue"
import { useRouter } from 'vue-router'
const Router = useRouter()

// 父组件传第过来的模块标题和书籍数据
const props = defineProps({
    title: {
        type: String,
        require: true,
        default: "默认标题"
    },
    books: {
        type: Array,
        require: true,
        default: [1, 2, 3, 4, 5, 6, 7, 8]
    },
    items: {
        type: Array,
        require: true,
        default: [

        ]
    }
});

const rate = ref(4)

// 点击书籍进入详情页
const goDetail = () => {
    Router.push({
        path: '/detail'
    })
}


// 选中的分类标签
const checked = ref(0)

</script>

<template>
    <div class="recommend">
        <h2>{{ title }}</h2>
        <el-row v-if="items.length != 0" justify="center">
            <el-check-tag :checked="checked == index" v-for="(item, index) in items" :key="item.label" :type="item.type"
                class="mx-1" effect="plain" round @click="checked = index">
                {{ item.label }}
            </el-check-tag>
        </el-row>
        <hr>
        <div class="books">
            <div class="bgbook" @click="goDetail()">
                <img src="/cover.jpg" alt="" class="cover">
                <span style="font-size: 24px;text-align: left;width: 80%;font-weight: bolder;">剑来</span>
                <span style="font-size: 20px;text-align: left;width: 80%;font-weight: bold;">李佳强</span>
                <el-rate v-model="rate" allow-half disabled />
                <p style="font-size: 14px;color: #ccc;text-align: left;width: 80%;">5人看过</p>
            </div>
            <div class="right">
                <div class="book" v-for="i in books" @click="goDetail()">
                    <img src="/cover.jpg" alt="" class="cover">
                    <span style="font-size: 20px;text-align: left;width: 80%;font-weight: bolder;">剑来 <i
                            style="font-size: 14px;color: #ccc;text-align: left;">vue</i></span>
                    <el-rate v-model="rate" allow-half disabled />
                    <p style="font-size: 14px;color: #ccc;text-align: left;width: 80%;">5人看过</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.recommend {
    width: 1000px;
    height: 500px;
    // background-color: pink;
    margin: 20px auto;

    .books {
        width: 98%;
        height: 84%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 auto;

        .bgbook {
            width: 200px;
            height: 400px;
            margin: 0 auto;
            background-color: #fff;
            // border: 1px solid black;
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-direction: column;

            .cover {
                width: 90%;
            }
        }

        .right {
            width: 800px;
            height: 400px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: center;
            // background-color: #fff;


            .book {
                margin: 5px;
                width: 160px;
                height: 220px;
                background-color: #fff;
                // border: 1px solid black;
                display: flex;
                align-items: center;
                justify-content: space-around;
                flex-direction: column;

                .cover {
                    width: 75%;
                }
            }
        }

    }
}

.el-tag{
    cursor: pointer;
}
</style>